<template>
  <div class="box-header drag">
    <div style="flex: 1" class="drag"></div>
    <div class="btn shrink nodrag" @click="windowChange(1)">
      <SvgIcon name="shrink"></SvgIcon>
    </div>
    <div class="btn shrink nodrag" @click="windowChange(2)">
      <SvgIcon :name="isMax ? 'sf' : 'fd'"></SvgIcon>
    </div>
    <div
      class="btn close nodrag"
      @mouseover="changeColor(true)"
      @mouseleave="changeColor(false)"
      @click="windowChange(3)"
    >
      <SvgIcon name="close" :color="closeColor"></SvgIcon>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import SvgIcon from './SvgIcon.vue'
const closeColor = ref('#333')
function changeColor(isHover = false) {
  closeColor.value = isHover ? '#fff' : '#333'
}
const isMax = ref(false)
function windowChange(type) {
  window.api.windowChange(type)
}
window.api.resizeWindow((event, value) => {
  isMax.value = value
})
</script>

<style lang="scss">
.box-header {
  display: flex;
  justify-content: flex-end;
  background-color: #f6f6f7;
  box-sizing: border-box;
}
.btn {
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
}
.shrink:hover {
  background-color: #e4e1e1;
}
.close:hover {
  background-color: rgba(240, 72, 64);
}
</style>
